<template>
  <div>
    <div class="dleBox" style="margin: 0 10px 10px 10px">
      课程名称：{{ detList.goods_name }}
    </div>
    <div class="dleBox">老师名称：{{ detList.real_name }}</div>
    <div class="dleBox">学生名称：{{ detList.customer_name }}</div>
    <div class="dleBox">原上课日期：{{ detList.course_date }}</div>
    <div class="dleBox">原上课时间段：{{ detList.course_time }}</div>
    <div class="dleBox">
      选择老师：
      <el-select v-model="userValue" placeholder="请选择" @change="UserChange">
        <el-option
          v-for="item in userOptions"
          :key="item.user_id"
          :label="item.user_name"
          :value="item.user_id"
        />
      </el-select>
    </div>
    <div class="dleBox">
      上课日期：
      <el-select v-model="dateValue" placeholder="请选择" @change="dateChaneg">
        <el-option
          v-for="item in dateOptions"
          :key="item.date"
          :label="item.date + item.week"
          :value="item.date"
        />
      </el-select>
    </div>
    <div class="dleBox">
      上课时间：
      <el-select v-model="timeValue" placeholder="请选择">
        <el-option
          v-for="item in timeList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <div class="dleBox">
      <el-button @click="Submit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import {
    getWeekDate,
    courseAdjust,
    getAdjustCourseUser,
  } from '@/api/reservation'
  // getCourseUser,
  export default {
    props: {
      detList: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        userOptions: [],
        userValue: '',
        dateOptions: [],
        dateValue: '',
        timeList: [],
        timeValue: '',
        form: {},
      }
    },
    watch: {
      detList() {
        this.userValue = ''
        this.dateValue = ''
        this.timeValue = ''
        this.userOptions = []
        this.dateOptions = []
        this.timeList = []
        this.init()
      },
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const params = {
          goods_id: this.detList.goods_id,
        }
        getAdjustCourseUser(params).then((e) => {
          this.userOptions = e.data
        })
      },
      // 老师上课日期
      UserChange(e) {
        this.dateOptions = []
        this.dateOptions = []
        this.timeValue = ''
        this.dateValue = ''
        const params = {
          user_id: e,
        }
        this.userOptions.forEach((k) => {
          if (k.user_id == e) {
            params.type = k.scheduling_rule
          }
        })
        this.form.user_id = e

        getWeekDate(params).then((j) => {
          this.dateOptions = j.data
        })
      },
      // 获取时间段
      dateChaneg(e) {
        this.timeValue = ''
        this.timeList = []
        this.form.adjust_date = e
        this.dateOptions.forEach((j) => {
          if (j.date == e) {
            this.form.adjust_week = j.week
            this.timeList = j.time_list
          }
        })
      },
      // 提交
      Submit() {
        this.form.course_id = this.detList.course_id
        // this.form.goods_id = this.detList.goods_id
        // this.form.original_date = this.detList.course_date
        // this.form.original_time = this.detList.course_time
        // this.form.customer_card_id = this.detList.customer_card_id
        this.form.id = this.detList.id
        this.form.adjust_time = this.timeValue

        if (this.timeValue != '') {
          courseAdjust(this.form).then((e) => {
            if (e.status == false) {
              this.$message({
                message: e.message,
                type: 'warning',
              })
            } else {
              this.$message({
                message: '调课排课成功',
                type: 'success',
              })
              this.goBack()
            }
          })
        } else {
          this.$message.error('请正确操作')
        }
      },
      goBack() {
        this.$emit('showBox')
      },
    },
  }
</script>

<style scoped>
  .dleBox {
    margin: 10px;
    font-size: 15px;
  }
</style>
